<!DOCTYPE html>
<html>

<head>
  <title>读取本地文件</title>
</head>

<body>
  <input type="file" id="fileInput">
  <ul id="fileList"></ul>

  <script>
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');

    fileInput.addEventListener('change', function () {
      fileList.innerHTML = ''; // 清空之前的文件列表

      const files = Array.from(fileInput.files);
      files.forEach(file => {
        const li = document.createElement('li');
        li.textContent = file.name;
        fileList.appendChild(li);
      });
    });
  </script>
</body>

</html>